<template>
  <vueForm
    :formItem="formItem"
    :formHandler="formHandler"
    :formData="form_data"
    ref="vueForm"
  >
    <!-- 缩略图 -->
    <template v-slot:carsImg> <span>缩略图</span></template>
    <!-- 保养日期 -->
    <template v-slot:maintain>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-date-picker
            v-model="form_data.maintainDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col :span="6">下次保养日期：2020-12-12</el-col>
      </el-row>
    </template>
    <!-- 能源类型 -->
    <template v-slot:energy>
      <el-radio-group v-model="form_data.energyType" @change="changeEnergyType">
        <el-radio
          v-for="(item, index) in energyType"
          :key="index"
          :label="item.value"
          >{{ item.label }}</el-radio
        >
      </el-radio-group>
      <div
        class="progress-bar-wrap"
        v-if="form_data.energyType == 3 || form_data.energyType == 1"
      >
        <span class="label-text">电量：</span>
        <el-row>
          <el-col :span="10">
            <el-slider v-model="form_data.electric" show-input></el-slider>
          </el-col>
        </el-row>
      </div>
      <div
        class="progress-bar-wrap"
        v-if="form_data.energyType == 3 || form_data.energyType == 2"
      >
        <span class="label-text">油量：</span>
        <el-row>
          <el-col :span="10">
            <el-slider v-model="form_data.oil" show-input></el-slider>
          </el-col>
        </el-row>
      </div>
    </template>
    <!-- 车辆属性 -->
    <template v-slot:carsAttr>
      <el-button type="primary" @click="addCarsAttr">添加属性</el-button>
      <el-row
        class="carsAttr"
        :gutter="15"
        v-for="(item, index) in carsAttrArray"
        :key="index"
      >
        <el-col :span="4">
          <el-input v-model="item.key">11</el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="item.value">22</el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="danger" @click="delCarsAttr(index)">删除 </el-button>
        </el-col>
      </el-row>
    </template>
    <!-- 富文本 -->
    <template v-slot:content>
      <!-- <wangEditor></wangEditor> -->
      <div ref="editorDom"></div>
    </template>
    <!-- <template v-slot:leaseList>
      <el-row :gutter="20">
        <el-col
          :span="4"
          v-for="item in leaseListData"
          :key="item.carsLeaseTypeId"
        >
          <div>{{ item.carsLeaseTypeName }}</div>
          <el-input-number
            v-model="item.price"
            controls-position="right"
            :min="0"
            :max="10000"
            placeholder="请输入价格"
            style="width: 100%"
          ></el-input-number>
        </el-col>
      </el-row>
    </template> -->
  </vueForm>
</template>
<script>
import aMap from "@/views/aMap/aMap";
import vueForm from "@/components/form/index";
import Editor from "wangeditor";
import { getCarsBrand, getParking } from "@/request/common";
import { carsAdd } from "@/request/cars";
import { messageFun } from "@/utils/element";
export default {
  data() {
    return {
      form_data: {
        carsBrandId: "",
        parkingId: "",
        carsMode: "",
        carsNumber: "",
        carsFrameNumber: "",
        engineNumber: "",
        carsImg: "",
        countKm: "",
        yearCheck: true,
        gear: 1,
        energyType: 2,
        electric: 10,
        oil: 100,
        carsAttr: [],
        content: "",
        maintainDate: "",
        status: true,
      },
      formItem: [
        {
          type: "Select",
          label: "车辆品牌",
          placeholder: "请选择车辆品牌",
          prop: "carsBrandId",
          required: true,
          options: [],
          _valueType: "nameCh",
        },
        {
          type: "Select",
          label: "停车场",
          placeholder: "请选择停车场",
          prop: "parkingId",
          required: true,
          _valueType: "parkingName",
        },
        {
          type: "Input",
          label: "车辆型号",
          placeholder: "请输入车辆型号",
          prop: "carsMode",
          required: true,
        },
        {
          type: "Input",
          label: "车牌号",
          placeholder: "请输入车牌号",
          prop: "carsNumber",
          required: true,
        },
        {
          type: "Input",
          label: "车架号",
          placeholder: "请输入车架号",
          prop: "carsFrameNumber",
          required: true,
        },
        {
          type: "Slot",
          slotName: "carsImg",
          prop: "carsImg",
          label: "缩略图",
        },
        {
          type: "Input",
          label: "发动机号",
          placeholder: "请输入发动机号",
          prop: "engineNumber",
          required: true,
        },
        {
          type: "Radio",
          label: "年检",
          placeholder: "请选择年检",
          required: true,
          options: this.$store.state.config.year_check,
        },
        {
          type: "Slot",
          slotName: "maintain",
          prop: "maintainDate",
          label: "保养日期",
        },
        {
          type: "Radio",
          label: "档位",
          placeholder: "请选择档位",
          prop: "gear",
          options: this.$store.state.config.gear,
        },
        {
          type: "Slot",
          slotName: "energy",
          prop: "energyType",
          label: "能源类型",
        },
        {
          type: "Input",
          label: "可行驶公里",
          prop: "countKm",
        },
        {
          type: "Slot",
          slotName: "carsAttr",
          prop: "carsAttr",
          label: "车辆属性",
        },
        {
          type: "Slot",
          slotName: "content",
          prop: "content",
          label: "车辆描述",
        },
        // {
        //   type: "Slot",
        //   slotName: "leaseList",
        //   prop: "lease",
        //   label: "租赁价格",
        // },
        {
          type: "Radio",
          label: "禁启用",
          prop: "status",
          required: true,
          options: this.$store.state.config.parking_status,
        },
      ],
      formHandler: [
        {
          type: "primary",
          label: "确认",
          key: "1",
          handler: () => this.onSubmit(),
        },
      ],
      // 能源类型
      energyType: this.$store.state.config.energyType,
      leaseListData: [],
      carsBrandList: [],
      parkingList: [],
      carsAttrArray: [],
      editor: null,
    };
  },
  components: {
    aMap,
    vueForm,
  },
  created() {
    this.getCarsBrand();
    this.getParking();
  },
  mounted() {
    this.editor = new Editor(this.$refs.editorDom);
    this.editor.config.onchange = (html) => {
      this.form_data.content = html;
    };
    this.editor.create(); // 创建富文本实例
  },
  methods: {
    async onSubmit() {
      this.attrFormat();
      const { data } = await carsAdd(this.form_data);
      console.log(data);
      if (data && data.resCode === 0) {
      } else {
        messageFun(data.message);
      }
    },
    async getCarsBrand() {
      const { data } = await getCarsBrand();
      if (data && data.resCode === 0) {
        this.formItem.filter((item, index) => {
          if (item.prop === "carsBrandId") {
            item.options = data.data.data;
          }
        });
      }
    },
    async getParking() {
      const { data } = await getParking();
      if (data && data.resCode === 0) {
        this.formItem.filter((item, index) => {
          if (item.prop === "parkingId") {
            item.options = data.data.data;
          }
        });
      }
    },
    attrFormat() {
      const jsonData = {};
      this.carsAttrArray.forEach((item) => {
        if (item.key) {
          jsonData[item.key] = item.value;
        }
      });
      this.form_data.carsAttr = JSON.stringify(jsonData);
    },
    addCarsAttr() {
      this.carsAttrArray.push({ key: "", value: "" });
    },
    delCarsAttr(index) {
      this.carsAttrArray.splice(index, 1);
    },
    // 能源类型
    changeEnergyType() {
      this.form_data.oil = 0;
      this.form_data.electric = 0;
    },
  },
};
</script>
<style lang="scss">
.aMap {
  width: 100%;
  height: 350px;
}
</style>
